<template>
  <div class="evaluate-con">
    <div class="breadcrumb-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/userCenter' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/order' }">订单</el-breadcrumb-item>
        <el-breadcrumb-item>评价</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="goodsStyle td-fsc" v-if="orderCon.productInfo">
        <img class="goods-img" :src="orderCon.productInfo.image" />
        <div class="text td-f1 td-fas td-fc">
          <div class="name line2">{{ orderCon.productInfo.store_name }}</div>
          <div class="money td-fsc">
            <div>￥{{ orderCon.productInfo.price }}</div>
            <div class="num">x{{ orderCon.cart_num }}</div>
          </div>
        </div>
      </div>
      <div class="score">
        <el-form label-width="100px">
          <el-form-item :label="item.name" v-for="(item, indexw) in scoreList" :key="indexw">
            <div class="starsList td-fsc">
              <div class="star">
                <v-star :star="item.star" @change="changeStar(indexw, arguments[0])"></v-star>
              </div>
              <span class="evaluate" v-if="item.star">{{item.star}}</span>
            </div>
          </el-form-item>

          <el-form-item label="描述">
            <el-input
              type="textarea"
              v-model="expect"
              :autosize="{ minRows: 4, maxRows: 8}"
              placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~"
            ></el-input>
          </el-form-item>
          <div data-v-43e78bf1 class="el-form-item">
            <label class="el-form-item__label" style="width: 100px;">上传图片</label>
            <div class="el-form-item__content upload-img" style="margin-left: 100px;">
              <el-upload
                ref="upload"
                :action="url"
                :data="qiniuData"
                list-type="picture"
                :limit="3"
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeAvatarUpload"
                :on-remove="handleRemove"
                :on-success="handleAvatarSuccess"
              >
                <el-button size="small" type="primary">选择图片</el-button>
                <div slot="tip" class="el-upload__tip">最多可上传3张，单张图片最大不超过10M</div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" size="tiny">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
          </div>
          <el-form-item>
            <el-button class="btn-r" @click="submit">提交评价</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style scoped  lang="scss" scoped>
.goodsStyle {
  width: 600px;
  border: solid #eee 1px;
  padding: 20px;
  margin: 60px auto 40px;
  .goods-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    display: block;
    margin-right: 20px;
  }
  .text {
    font-size: 14px;
    color: #333;
    height: 60px;
    .money {
      margin-top: 10px;
    }
    .num {
      padding-left: 20px;
      font-size: 14px;
      color: #999;
    }
  }
}
.score {
  width: 600px;
  margin: 0 auto 200px;
  border: solid #eee 1px;
  padding: 40px 20px;
  box-shadow: 0 5px 10px rgba($color: #000000, $alpha: 0.2);
  .starsList {
    height: 40px;
    .evaluate {
      font-size: 18px;
      padding-left: 20px;
      color: #014a97;
    }
  }
  ::v-deep .el-textarea__inner {
    width: 460px;
    padding: 10px 15px;
  }
}
</style>
<script>
import Star from "@components/Star";
import { postOrderProduct, postOrderComment } from "@api/store";
import { qiniuToken } from "@api/public";
import { trim, VUE_APP_API_URL } from "@utils";

const NAME = "GoodsEvaluate";

export default {
  name: NAME,
  components: {
    "v-star": Star
  },
  props: {},
  data() {
    return {
      unique: this.$route.params.id,
      orderCon: {
        cartProduct: {
          productInfo: {}
        }
      },
      expect: "",
      scoreList: [
        {
          name: "商品质量",
          star: 0
        },
        {
          name: "服务态度",
          star: 0
        }
      ],
      // el-upload img
      url: 'http://upload-z2.qiniup.com',
      dialogImageUrl: "",
      dialogVisible: false,
      qiniuDomail: '',
      qiniuData: {},
      fileList: [], // 上传文件列表
      fileType: ["image/png", "image/jpg", "image/jpeg", "image/gif"]
    };
  },
  mounted() {
    this.getQiniuToken();
    this.getOrderProduct();
  },
  watch: {
    $route(n) {
      if (n.name === NAME && this.unique !== n.params.id) {
        this.unique = n.params.id;
        this.$set(this.scoreList[0], "index", -1);
        this.$set(this.scoreList[1], "index", -1);
        this.expect = "";
        this.uploadPictures = [];
        this.getOrderProduct();
      }
    }
  },
  methods: {
    getQiniuToken () {
      qiniuToken()
        .then(res => {
          this.qiniuData.token = res.data.uptoken
          this.qiniuDomail = res.data.pc_domain
        })
        .catch(err => {
          this.$dialog.error(err.msg || "获取七牛数据失败");
        });
    },
    getOrderProduct() {
      let that = this,
        unique = that.unique;
      postOrderProduct(unique).then(res => {
        that.orderCon = res.data;
      });
    },
    changeStar(index, arg) {
      this.scoreList[index].star = arg;
    },
    async submit() {
      const expect = trim(this.expect),
        product_score = this.scoreList[0].star,
        service_score = this.scoreList[1].star;
      let imgs  = []
      imgs = this.fileList.map((item)=>{
        return this.qiniuDomail + '/' + item.response.key
      })
      if (!product_score) {
        this.$dialog.toast({
          mes: "请对商品质量评分",
          timeout: 1500
        });
        return;
      }
      if (!service_score) {
        this.$dialog.toast({
          mes: "请对服务态度评分",
          timeout: 1500
        });
        return;
      }
      if (!expect) {
        this.$dialog.toast({
          mes: "请说说你的想法，分享给想买的他们吧~",
          timeout: 1500
        });
        return;
      }
      postOrderComment({
        product_score: product_score,
        service_score: service_score,
        unique: this.unique,
        pics: imgs.join(","),
        comment: expect
      })
        .then(() => {
          this.$dialog.success("评价成功");
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500);
        })
        .catch(res => {
          this.$dialog.error(res.msg);
        });
    },
    // upload img
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file, fileList) {
      this.fileList = fileList;
    },
    beforeAvatarUpload(file) {
      let that = this;
      const isImage = this.fileType.indexOf(file.type) > -1;
      const isLt20M = file.size / 1024 / 1024 < 20;

      if (!isImage) {
        this.$dialog.error('请上传图片类型文件');
      }
      if (!isLt20M) {
        this.$dialog.error('请上传小于20M文件！');
      }
      return isImage && isLt20M;
    }
  }
};
</script>
